<template >
    <div>
       
       <el-row class="login-container" justify="center" :align="middle">
           <el-card style="max-width: 480px;">
               <template #header>
                   <div class="card-header">
                       <img :src="imgUrl" alt="">
                   </div>
               </template>
               <div class="word" >用工管理</div>
               <div class="jump-link">
                   <!-- <el-link type="primary" @click="handleChange" >{{ formType ? '返回登录' : '注册账号' }}</el-link> -->
               </div>
               <el-form 
               ref="loginFromRef"
               :rules="rules"
               :model="loginForm" 
               style="max-width: 600px"
               class="demo-ruleForm">
                   <el-form-item prop="username">
                       <el-input v-model="loginForm.username" placeholder="手机号" prefix-icon="UserFilled" ></el-input>
                   </el-form-item>
                   <el-form-item prop="password">
                       <el-input v-model="loginForm.password" type="passWoed" placeholder="密码" prefix-icon="Lock" ></el-input>
                   </el-form-item>
                   <el-form-item v-if="formType" prop="validCode">
                   </el-form-item>
                   <el-button type="primary"  :style="{width: '100%'}" @click="loginFun">登录</el-button>
                       
               </el-form>
           </el-card>
   
       </el-row>
       
   </div>
   </template>
   <script setup>
   
   import {ref,reactive} from 'vue'
   import  {useRouter} from 'vue-router'
   import { login } from '../../api';
   const imgUrl=new URL('../../../public/sign.png', import.meta.url).href
   const router = useRouter()
   
   //表单数据
   const loginForm=reactive({
       username:'admin',
       password:'macro123',
       loginButton:''
   })
   
   const loginFromRef = ref()
   
   const submitForm = async(formEI) =>{
       if(valid){
           //登录页面
           
               if(validataUser.value===15025388262 && validataPass.value===123456){
                   EIMessage.success('登陆成功')
                   router.push('/')
           }
       }else{
           console.log('error submit!',fields)
       }
   }
   
   const loginFun = async() => {
       return await login(loginForm).then(({data})=> {
           if(data.code === 10000)
               EIMessage.success('登陆成功')
               localStorage.setItem('token',data.token)
               router.push('/')
       })
   }
   
   
   //账号校验规则
   const validataUser=(rule,value,callback)=>{
       //不能为空
       if(value === ''){
           callback(new Error('请输入账号'))
       }else{
           const phoneReg = /^[a-zA-Z0-9_-]{4,16}$/
           phoneReg.test(value) ? callback: callback (new Error('格式错误,请输入正确格式'))
       }
   
   }
   
   //密码校验
   const validataPass=(rule,value,callback) =>{
       //不能为空
       if(value === ''){
           callback(new Error('请输入密码'))
       }else{
           const phoneReg = /^[a-zA-Z0-9_-]{4,16}$/
           phoneReg.test(value) ? callback: callback (new Error('密码式错误,请输入4-16位字符,请确认格式'))
       }
   }
   
   //表单校验
   const rules = reactive({
       username:[{validator:validataUser,trigger: 'blur'}],
       password:[{validator:validataPass,trigger: 'blur'}]
   
   })

   console.log(loginForm.username,'loginForm.username')
   let flag = false
   const phoneReg = /^1[3|4|5|7|8][0-9]\d{8}$/
   const countdwonChange = ()=>{
       if(flag) return
       //判断手机号是否正确
       if(loginForm.username || !phoneReg.test(loginForm.username)){
           return ElMessage({
               message: '请检查手机号是否正确',
               type: 'warning',
           })
       }
   
   //     //倒计时
   //     setInterval(()=>{
   //         if(countdwon.time <= 0){
   //             countdwon.time = 60,
   //             countdwon.validText = "获取验证码"
   //             flag = false
   //         }else{
   //             countdwon.time -=1
   //             countdwon.validText = `剩余${countdwon.time}s`
   //         }
           
   //     },1000)
   //     flag = true
    }
   
   // const submitForm = ()=>{
   
   // }
   
   </script>
   <style lang="less">
   :deep(.el-card__header) {
       padding: 0
     }
     .login-container {
       margin-top: 60px;
       height: 100%;
       .card-header{
         background-color: #dedfdf;
         img {
           width: 318px;
           height: 240px;
         }
       }
       .word{
           font-style: normal;
           font-size: 40px;
           color: rgb(124, 159, 230);
           font-family: "黑体";
           text-align: center;
           font-weight: bold;
       .jump-link {
         text-align: right;
        
       }
     }
   
     }
   </style>